<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue3</title>
  <link rel="stylesheet" type="text/css" href="../css/drawer.css">
  <link rel="stylesheet" type="text/css" href="../css/colorPlatePopup.css">
  <link rel="stylesheet" href="../lib/element-plus@2.8.4/index.css" />
  <link rel="stylesheet" href="../css/theme-chalk/dark/css-vars.css" />
  <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "vue": "../lib/vue@3.5.10/vue.esm-browser.js"
      }
    }
  </script>
  <script src="../lib/numeric.js"></script>
  <script src="../lib/svd.js"></script>
  <div id="app" class="page">
  </div>
  <script type="module">
    import { createApp, ref, onMounted, watch } from '../lib/vue@3.5.10/vue.esm-browser.js'
    import ArrowDrawer from "../component/ArrowDrawer.js";
    import {ElMessage, ElButton, ElInput, ElSlider, ElColorPicker, ElDivider, ElIcon, ElSwitch, ElAutocomplete, ElScrollbar} from "../lib/element-plus@2.8.4/index.full.min.mjs";
    import {Edit, StarFilled} from "../lib/@element-plus/icons-vue@2.3.1/index.js";
    import WorkAreaBar from "../component/WorkAreaBar.js";
    import RoutePointBar from "../component/RoutePointBar.js";
    import RouteBar from "../component/RouteBar.js";
    import GeoCodeInput from "../component/GeoCodeInput.js";
    import PaneSprayConfig from "../component/PaneSprayConfig.js";
    import World3dEvent from "./src/3d/scene/event/World3dEvent.js";
    import {getWorld3dInstance} from "./src/3d/scene/World3d.js";
    
    const app = createApp({
      components: {
        WorkAreaBar, RoutePointBar, RouteBar, GeoCodeInput, PaneSprayConfig
      },
      setup() {
        const world3d = getWorld3dInstance()
        onMounted(() => {
          const box3d = document.getElementById('box');
          box3d.insertBefore(world3d.renderer.domElement, box3d.firstChild)
          app.config.globalProperties.$world3d = world3d
          const jsonInput = document.getElementById('jsonInput');
          jsonInput.oninput = (event) => {
            world3d.store.importPlaneRefs(event.target.files[0]);
          }
          app.config.globalProperties.$jsonInput = jsonInput
          
        })
        const visi = ref(true)
        const setVisi = (value) => {
          visi.value = value
        }
        const showConvex = ref(true)
        watch(showConvex, async (newVal, oldVal) => {
          world3d.toggleConvexVisible(newVal)
        })
        const phiRange = ref([1, 4])
        const thetaRange = ref([1, 4])
        const phiColor = ref('#c40022')
        const thetaColor = ref('rgb(0,157,50)')
        watch(phiColor, async (newVal, oldVal) => {
          // const numbers = newVal.match(/\d+(\.\d+)?/g);
          world3d.updatePhiRange(phiRange.value[0], phiRange.value[1], phiColor.value)
        })
        watch(thetaColor, async (newVal, oldVal) => {
          world3d.updateThetaRange(thetaRange.value[0], thetaRange.value[1], thetaColor.value)
        })
        watch(phiRange, (newVal) => {
          world3d.updatePhiRange(newVal[0], newVal[1], phiColor.value)
        })
        watch(thetaRange, (newVal) => {
          world3d.updateThetaRange(newVal[0], newVal[1], thetaColor.value)
        })
        const predefineColors = ref([
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577',
        ])
        const savePlan = () => {
          world3d.saveToLocalStorage()
          ElMessage({
            message: '方案保存到本地成功！',
            type: 'success',
          })
        }
        
        return {
          world3d,
          savePlan,
          visi,
          setVisi,
          showConvex,
          phiRange,
          thetaRange,
          phiColor,
          thetaColor,
          predefineColors,
          Edit,
        }
      },
      template: `
  <div id="box" class="full-size">
    <input type="file" id="jsonInput" style="display: none" accept="application/json"/>
    <WorkAreaBar class="place-top-right"/>
    <RoutePointBar class="place-top-right"/>
    <RouteBar class="place-top-right"/>
    <ArrowDrawer
      :visible="visi"
      :setVisible="setVisi"
      title="3d编辑"
      :width="400"
    >
<!--      <el-scrollbar height="92vh">-->
        <div class="edit-action">
          <el-button size="small" @click="world3d.startSetFlyHomePoint()">设置起飞点</el-button>
          <el-button size="small" @click="$world3d.startSetCalibration()">设置校准点</el-button>
        </div>
        <el-divider>
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <div class="edit-action"><el-button @click="$world3d.settingPlaneHelper(true)" size="small">找辅助平面（立面）</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.settingPlaneHelper(false)" size="small">找辅助平面（非立面）</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.addingConvex3dVert()" size="small">设置三维凸包采样空间</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.sampleOutConvex3dMesh()" size="small">采样三维凸包网格</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.store.addingGridVert()" size="small">新增曲面网格顶点</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.store.addingSurfaceArea()" size="small">设置曲面的局部切平面</el-button></div>
        <el-divider>
          添加辅助工具
        </el-divider>
        <div class="edit-action"><el-button @click="$world3d.addingWorkArea()" size="small">创建工作区</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.addingSliceLines()" size="small">创建非平面工作区</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.addingHole()" size="small">创建不可喷涂区</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.editingHole()" size="small">编辑区域（工作区与不可喷涂区）</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.startAddBlocking()" size="small">标定障碍物</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.startAddRoutePoints()" size="small">标定手动航点</el-button></div>
        <div class="edit-action"><el-button @click="$world3d.addNewRoute()" size="small">新增航线</el-button></div>
        <PaneSprayConfig class="spray-config-form"/>
        <el-divider>
          规划工作区与航线
        </el-divider>
        <div class="edit-action"><el-button @click="$world3d.store.exportPlaneRefs()" size="small">导出辅助平面</el-button></div>
        <div class="edit-action"><el-button @click="$jsonInput.click()" size="small">导入辅助平面</el-button></div>
        <div class="edit-action">
          <el-switch
            v-model="showConvex"
            inline-prompt
            active-text="显示"
            inactive-text="隐藏"
          />
          三维凸包网格
        </div>
        <div class="edit-range">
          Φ<el-slider v-model="phiRange" range :max="180" show-stops/>
          <el-color-picker v-model="phiColor" show-alpha :predefine="predefineColors" />
        </div>
        <div class="edit-range">
          θ<el-slider v-model="thetaRange" range :min="-180" :max="180" show-stops/>
          <el-color-picker v-model="thetaColor" show-alpha :predefine="predefineColors" />
        </div>
        <div class="edit-action">
          <el-button @click="savePlan()" size="small" type="primary">保存方案</el-button>
        </div>
        <el-divider>
          杂项
        </el-divider>
        <GeoCodeInput/>
<!--      </el-scrollbar>-->
    </ArrowDrawer>
  </div>`
    })
    app.component('ArrowDrawer', ArrowDrawer)
    app.component('ElButton', ElButton)
    app.component('el-slider', ElSlider)
    app.component('ElColorPicker', ElColorPicker)
    app.component('ElDivider', ElDivider)
    app.component('ElIcon', ElIcon)
    app.component('ElSwitch', ElSwitch)
    app.component('ElInput', ElInput)
    app.component('ElAutocomplete', ElAutocomplete)
    app.component('ElScrollbar', ElScrollbar)
    app.component('StarFilled', StarFilled)
    // app.config.globalProperties.abc = '123'
    app.mount('#app')
  </script>
</body>
</html>
